<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Panel</h1>
		<div class="entry">
			<p>Panel is a generic grouping component that also supports toggling, closing and options menu. Both Close and Toggle events can be listened on server side
			with ajax listeners.</p>

            <h:form>
			
                <p:growl id="growl" showDetail="true"/>

                <h3>Simple Panel</h3>
                <p:panel header="F.C. Barcelona" footer="Visca el Barca!">
                    <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
                    having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
                    They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
                    including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
                    a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
                    The club is also the only European side to have played continental football in every season since its inception in 1955." />
                </p:panel>

                <h3>Advanced Panel</h3>
                <p:panel id="pnl" header="About Barca" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="500" widgetVar="panel">

                    <p:ajax event="close" listener="#{panelBean.handleClose}" update="growl" />
                    <p:ajax event="toggle" listener="#{panelBean.handleToggle}" update="growl" />

                    <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
                            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
                            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
                            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
                            a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
                            The club is also the only European side to have played continental football in every season since its inception in 1955." />

                    <f:facet name="options">
                        <p:menu>
                            <p:submenu label="Settings">
                                <p:menuitem value="Toggle" url="#" icon="ui-icon-newwin" onclick="panel.toggle()"/>
                                <p:menuitem value="Remove" url="#" icon="ui-icon-close" onclick="panel.close()"/>
                            </p:submenu>
                        </p:menu>
                    </f:facet>
                </p:panel>
                
                <h3>Custom Actions</h3>
                <p:panel header="F.C. Barcelona">
                    <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
                    having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
                    They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
                    including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
                    a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
                    The club is also the only European side to have played continental football in every season since its inception in 1955." />
                    
                    <f:facet name="actions">
                        <h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></h:commandLink>
                        <h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-star" /></h:commandLink>
                    </f:facet>
                </p:panel>
                
                <h3>Horizontal Toggle</h3>
                <p:panel header="F.C. Barcelona" toggleable="true" toggleOrientation="horizontal">
                    <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
                    having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
                    They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
                    including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
                    a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
                    The club is also the only European side to have played continental football in every season since its inception in 1955." />
                </p:panel>
            </h:form>
		
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="panel.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:growl id="growl" showDetail="true"/&gt;

    &lt;h3&gt;Simple Panel&lt;/h3&gt;
    &lt;p:panel header="F.C. Barcelona" footer="Visca el Barca!"&gt;
        &lt;h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
        having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
        They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
        including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
        a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
        The club is also the only European side to have played continental football in every season since its inception in 1955." /&gt;
    &lt;/p:panel&gt;

    &lt;h3&gt;Advanced Panel&lt;/h3&gt;
    &lt;p:panel id="pnl" header="About Barca" toggleable="true" closable="true" toggleSpeed="500" closeSpeed="500" widgetVar="panel"&gt;

        &lt;p:ajax event="close" listener="\#{panelBean.handleClose}" update="growl" /&gt;
        &lt;p:ajax event="toggle" listener="\#{panelBean.handleToggle}" update="growl" /&gt;

        &lt;h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
                having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
                They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
                including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
                a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
                The club is also the only European side to have played continental football in every season since its inception in 1955." /&gt;

        &lt;f:facet name="options"&gt;
            &lt;p:menu&gt;
                &lt;p:submenu label="Settings"&gt;
                    &lt;p:menuitem value="Toggle" url="\#" icon="ui-icon-newwin" onclick="panel.toggle()"/&gt;
                    &lt;p:menuitem value="Remove" url="\#" icon="ui-icon-close" onclick="panel.close()"/&gt;
                &lt;/p:submenu&gt;
            &lt;/p:menu&gt;
        &lt;/f:facet&gt;
    &lt;/p:panel&gt;

    &lt;h3&gt;Custom Actions&lt;/h3&gt;
    &lt;p:panel header="F.C. Barcelona"&gt;
        &lt;h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
        having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
        They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
        including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
        a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
        The club is also the only European side to have played continental football in every season since its inception in 1955." /&gt;

        &lt;f:facet name="actions"&gt;
            &lt;h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"&gt;
                &lt;h:outputText styleClass="ui-icon ui-icon-help" /&gt;
            &lt;/h:commandLink&gt;
            &lt;h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"&gt;
                &lt;h:outputText styleClass="ui-icon ui-icon-star" /&gt;
            &lt;/h:commandLink&gt;
        &lt;/f:facet&gt;
    &lt;/p:panel&gt;

    &lt;h3&gt;Horizontal Toggle&lt;/h3&gt;
    &lt;p:panel header="F.C. Barcelona" toggleable="true" toggleOrientation="horizontal"&gt;
        &lt;h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
        having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
        They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
        including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners' Cups,
        a record three InterCities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
        The club is also the only European side to have played continental football in every season since its inception in 1955." /&gt;
    &lt;/p:panel&gt;

&lt;/h:form&gt;
			</pre>
				</p:tab>
				
				<p:tab title="PanelBean.java">
				<pre name="code" class="java">
public class PanelBean {

	public void handleClose(CloseEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Panel Closed", "Closed panel id:'" + event.getComponent().getId() + "'");
		
		addMessage(message);
	}
	
	public void handleToggle(ToggleEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, event.getComponent().getId() + " toggled", "Status:" + event.getVisibility().name());
		
		addMessage(message);
	}
	
	private void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
			</pre>
				</p:tab>
			</p:tabView>
         </div>
        
	</ui:define>
</ui:composition>
